<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
  <title></title>
  
    <!--meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /-->
	<!--meta charset="utf-8"-->


	<!-- iPad/iPhone specific css below, add after your main css >
	<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />		
	<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />		
	-->
	<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
	<!-- <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script-->
    <script type="text/javascript">


	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
	
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/
	
	/*
	
	function onBodyLoad()
	{		
		document.addEventListener("deviceready", onDeviceReady, false);
	}
	*/
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	
	/*function onDeviceReady()
	{
		// do your thing!
		// navigator.notification.alert("PhoneGap is working")
	}
    */
    </script>
  </head>
  <body>
  
<div id="boardMigDiv"><img id="boardMig" src="images/board05.gif"></div>
<div id="boardDiv"></div>
<div id="notes"></div>
<!--input id="check0" type="checkbox"-->
<input id="check0" value="" type="button" onclick="handleCheck()">
<div id="preferences" style="top:210px;"> 
	<span class="Y" onclick="changeMigs();">Change Pieces</span><br/>
	<span class="Y" onclick="changeBoardImage();">Change Board</span>
	<p/>
	<span class="Y" onclick="alert('changed');CM.changePopDuration(parseInt(document.getElementById('popDurInput').value));">Pop Time </span><input id="popDurInput" type=text size="3" class="Q" value="1000"/><br/>
	<span class="Y" onclick="alert('changed');CM.changeMoveDuration(parseInt(document.getElementById('movDurInput').value));">Move Time </span><input id="movDurInput" type=text size="3" class="Q" value="1200"/><br/>
	<span class="Y" onclick="alert('changed');CM.changeSetupPause(parseInt(document.getElementById('setPawsInput').value));">Setup Pause </span><input id="setPawsInput" type=text size="3" class="Q" value="20"/><br/>
</div>
<div id="menuArea">
	<div id="prefArrow" class="Q" style="position:absolute;top:0px;left:0px;text-align:center" onclick="window.togglePrefs()">&#9650;&#9650;&#9650;</div>
	<!--div style="top:88px;left:33px;" class="X" onclick="window.gotoBoard(document.getElementById('gotoInput').value);">Go to #</div-->
	<input id="gotoInput" style="position:absolute;width:90px;left:2px;bottom:2px;" type="text" class="X" value="1" onchange="window.gotoBoard(eval(parseInt(this.value) - 1));"/>
	<input type="button" class="btn" style="bottom:102px;right:102px;background-color:#ec6;color:#b73" value="&#9664;" onclick="nextBoard(-1)"/>
	<input type="button" class="btn" style="bottom:102px;right:1px;background-color:#ec6;color:#b73;width:98px;height:98px;font-size:50px" value="&#9654;" onclick="nextBoard(1)"/>
	<input type="button" class="btn" style="bottom:50px;right:102px;" value="&#9664;" onclick="CM.prevStep()"/>
	<input type="button" class="btn" style="bottom:1px;right:1px;height:98px;width:98px;font-size:50px" value="&#9654;" onclick="CM.nextStep()"/>
</div>
<div id="alertDiv" style="top:0px;left:0px">

<div id="msgArea">I am the ratMaster</div>
<input id="closeX" type="button" class="btn" value="X" onclick="chapterMsg(1)"/>
</div>

</div>


<script src="chessMaster.js"></script>
<script src="transforms.js"></script>
<script src="boards.js"></script>
<script src="chapterText.js"></script>

<script type="text/javascript">

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

var migPairs = [
  [//first set of pieces
  ['chessPieces0/black_pawn','p1'],
  ['chessPieces0/black_pawn','p2'],
  ['chessPieces0/black_pawn','p3'],
  ['chessPieces0/black_pawn','p4'],
  ['chessPieces0/black_pawn','p5'],
  ['chessPieces0/black_pawn','p6'],
  ['chessPieces0/black_pawn','p7'],
  ['chessPieces0/black_pawn','p8'],
  ['chessPieces0/black_castle','r1'],
  ['chessPieces0/black_castle','r2'],
  ['chessPieces0/black_bishop','b1'],
  ['chessPieces0/black_bishop','b2'],
  ['chessPieces0/black_horse','n1'],
  ['chessPieces0/black_horse','n2'],
  ['chessPieces0/black_queen','q1'],
  ['chessPieces0/black_queen','q2'],
  ['chessPieces0/black_king','k1'],
  ['chessPieces0/white_pawn','P1'],
  ['chessPieces0/white_pawn','P2'],
  ['chessPieces0/white_pawn','P3'],
  ['chessPieces0/white_pawn','P4'],
  ['chessPieces0/white_pawn','P5'],
  ['chessPieces0/white_pawn','P6'],
  ['chessPieces0/white_pawn','P7'],
  ['chessPieces0/white_pawn','P8'],
  ['chessPieces0/white_castle','R1'],
  ['chessPieces0/white_castle','R2'],
  ['chessPieces0/white_bishop','B1'],
  ['chessPieces0/white_bishop','B2'],
  ['chessPieces0/white_horse','N1'],
  ['chessPieces0/white_horse','N2'],
  ['chessPieces0/white_queen','Q1'],
  ['chessPieces0/white_queen','Q2'],
  ['chessPieces0/white_king','K1']
  ],
  [//second set of pieces
  ['chessPieces1/bp','p1'],
  ['chessPieces1/bp','p2'],
  ['chessPieces1/bp','p3'],
  ['chessPieces1/bp','p4'],
  ['chessPieces1/bp','p5'],
  ['chessPieces1/bp','p6'],
  ['chessPieces1/bp','p7'],
  ['chessPieces1/bp','p8'],
  ['chessPieces1/br','r1'],
  ['chessPieces1/br','r2'],
  ['chessPieces1/bb','b1'],
  ['chessPieces1/bb','b2'],
  ['chessPieces1/bn','n1'],
  ['chessPieces1/bn','n2'],
  ['chessPieces1/bq','q1'],
  ['chessPieces1/bq','q2'],
  ['chessPieces1/bk','k1'],
  ['chessPieces1/wp','P1'],
  ['chessPieces1/wp','P2'],
  ['chessPieces1/wp','P3'],
  ['chessPieces1/wp','P4'],
  ['chessPieces1/wp','P5'],
  ['chessPieces1/wp','P6'],
  ['chessPieces1/wp','P7'],
  ['chessPieces1/wp','P8'],
  ['chessPieces1/wr','R1'],
  ['chessPieces1/wr','R2'],
  ['chessPieces1/wb','B1'],
  ['chessPieces1/wb','B2'],
  ['chessPieces1/wn','N1'],
  ['chessPieces1/wn','N2'],
  ['chessPieces1/wq','Q1'],
  ['chessPieces1/wq','Q2'],
  ['chessPieces1/wk','K1']
  ]
];

boardMigList = [
	'images/board05.gif',
	'images/board07.gif',
	'images/board01.gif',
	'images/board02.png',
	'images/board06.jpg'
];

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

var notes    = document.getElementById('notes');
var boardDiv = document.getElementById('boardDiv');
var boardMig = document.getElementById('boardMig');
var goInput  = document.getElementById('gotoInput');
var prefDiv  = document.getElementById('preferences');
var prefArr  = document.getElementById('prefArrow');
var check0   = document.getElementById('check0');
var alertDiv = document.getElementById('alertDiv');
alertDiv.H   = 400;
alertDiv.W   = 700;
alertDiv.H2  = ~~(alertDiv.H);
alertDiv.W2  = ~~(alertDiv.W);
alertDivStyle = alertDiv.style;
alertDiv.isNotAnimating = true;

var wrapH    = 400;
var wrapW    = 700;
var wrapH2   = ~~(wrapH/2);
var wrapW2   = ~~(wrapW/2);

var msgArea  = document.getElementById('msgArea');

var CM = new chessMaster();
CM.init('boardDiv',migPairs[0],'ratmaster');

var boardCount = 0;

var handleNumInput = function(num){if(CM.isNotAnimating){
	gotoBoard(eval(parseInt(num) - 1));
}};

var gotoBoard = function(num){if(CM.isNotAnimating){
	 num = parseInt(num);
	 if(boards[num]){
		boardCount = num;
		checkForChapterText(num+1);
		CM.setupBoard(boards[boardCount]);
  		check0.value = (boards[boardCount][3]) ? '\u2714' : '';
	 }else{
		 alert('no board #'+num);
	 }
}};

var checkForChapterText = function(val){
  if(chapterText[val]){
	  chapterMsg(0,chapterText[val]);
  }
}

nextBoard = function(inc){if(CM.isNotAnimating){

  // this is a little much just to _ADD_
  var hackhack = eval(parseInt(boardCount)+parseInt(inc));
  boardCount = (((hackhack)%boards.length)+boards.length)%boards.length;
  checkForChapterText(boardCount+1);
  goInput.value = boardCount+1;
  CM.setupBoard(boards[boardCount]);

  // this is for the check mark tracker
  check0.value = (boards[boardCount][3]) ? '\u2714' : '';

}};


window.onload = function(){
	//  this will resize the board images
	//  you might not want that to happen

	boardMig.width  = boardDiv.offsetWidth;
	boardMig.height = boardDiv.offsetHeight;
	changeBoardImage();

	//nextBoard(0);
	chapterMsg(1,chapterText[00]);
};

var pieceMigCount = 0;
var boardMigCount = 0;
var slideDur      = 800;
var isNotSliding  = true;
var alertCloseDur = 1000;
	
var togglePrefs = function(){if(isNotSliding){
	var curTop = parseInt(prefDiv.style.top);
	var upArs = '&#9650;&#9650;&#9650;';
	var dnArs = '&#9660;&#9660;&#9660;';
	prefArr.innerHTML = (curTop == 10) ? upArs : dnArs;
	isNotSliding = false;
	slidePrefs(+new Date, slideDur, (curTop==10)?1:-1,curTop);
}};

var xxxform = new transform();

var slidePrefs = function(start, dur, dir, curTop){
	per = ((+new Date)-start)/dur;
	if(per >= 1){
		prefDiv.style.top = ~~((curTop==210)?10:210) +'px';
		isNotSliding = true;
	}else{
		prefDiv.style.top = ~~(curTop + dir*xxxform.easeIn(per)*200) + 'px';
		setTimeout(function(){slidePrefs(start, dur, dir, curTop)},0);
	}
}

var changeMigs = function(){if(CM.isNotAnimating){
	 pieceMigCount = (pieceMigCount+1)%migPairs.length;
	 CM.init('boardDiv', migPairs[pieceMigCount],'ratmaster');
	 CM.setupBoard(boards[boardCount]);
}};


var changeBoardImage = function(i){
	if(i){
		if(boardMigList[i]){
			boardMig.src = boardMigList[i];
			boardMigCount = (i+1)%boardMigList.length;
		}
	}else{
		boardMig.src = boardMigList[boardMigCount];
		boardMigCount = (boardMigCount+1)%boardMigList.length;
	}
};

var handleCheck = function(){
	boards[boardCount][3] = (!boards[boardCount][3]) ? 1 : 0;
	check0.value = (boards[boardCount][3]) ? '\u2714' : '';
}

var makeNote = function(n){
	notes.innerHTML = n;
};

var chapterMsg = function(dir,msg){if(alertDiv.isNotAnimating){
	if(msg){
		msgArea.innerHTML = msg;
		alertDivStyle.visibility = 'visible';
		popChapterMsg(+new Date, 1);
	}else{
		popChapterMsg(+new Date, 0);
	}
}};

var popChapterMsg = function(start,dir){
	per = ((+new Date)-start)/alertCloseDur;
	if(per >= 1){
		if(dir == 1){
		 alertDivStyle.height = alertDiv.H +'px';
		 alertDivStyle.width  = alertDiv.W +'px';
		 alertDivStyle.visibility = 'visible';
		}else{
		 alertDivStyle.height = '0px';
		 alertDivStyle.width  = '0px';
		 alertDivStyle.visibility = 'hidden';
		}

	}else{
	per = (dir == 1) ? xxxform.easeIn(per) : xxxform.easeIn(1-per);
		var tmpH = per*alertDiv.H;
		var tmpW = per*alertDiv.W;
		alertDivStyle.height =  tmpH + 'px'; 
		alertDivStyle.width  =  tmpW + 'px';
		alertDivStyle.top    = ~~(wrapH2-tmpH/2) +'px';
		alertDivStyle.left   = ~~(wrapW2-tmpW/2) +'px';
		setTimeout(function(){popChapterMsg(start, dir)},0);
	}
};
//CM.onSetupComplete(function(){chapterMsg(0,'chapter msg')});
//chapterMsg(0,'ARE YOU READY TO PLAY?');
/*
    window.plugins.inAppPurchaseManager.onFailed = function() {
        chapterMsg(1,'purchase failed!');
    }


var xxx= function(){alert('phonegap is ready')};
document.addEventListener('deviceready',xxx,false);
*/
</script>
	    </body>
</html>
